<template>
  <HModal ok-text="确定" cancel-text="取消" @cancel="close" @ok="handleOK"
         title="配置公式" :visible="visible" :height="700" :width="1000">
    <Layout>
      <layout-header>
        <FormulaInput ref="formulaInput" style="margin-top: 5px" v-model="formula"/>
      </layout-header>
      <LayoutBody>
        <Layout>
          <layout-side>
            <VariableSelector :flowModel="flowModel" @select="selectVariabe" :service="service"/>
          </layout-side>
          <layout-body>
            <FormulaActions @addAction="addAction"/>
          </layout-body>
        </Layout>
      </LayoutBody>
    </Layout>
  </HModal>
</template>
<script>
import {Modal} from 'ant-design-vue';
import {createProps} from '@/utils';
import FormulaInput from '@/components/flow/EdgeConfiguration/FormulaInput.vue';
import LayoutHeader from '@/components/flow/layout/LayoutHeader.vue';
import FormulaActions from '@/components/flow/EdgeConfiguration/FormulaActions.vue';
import Layout from '@/components/flow/layout/Layout.vue';
import LayoutBody from '@/components/flow/layout/LayoutBody.vue';
import VariableSelector from '@/components/flow/EdgeConfiguration/VariableSelector.vue';
import LayoutSide from '@/components/flow/layout/LayoutSide.vue';
import HModal from '@/components/HModal/HModal.vue';

export default {
  name: 'FormulaEditorModal',
  props: {
    value: createProps(String),
    flowModel: createProps(Object),
    service: createProps(Function),
  },
  components: {
    LayoutSide, VariableSelector, LayoutBody, Layout, FormulaActions,
    LayoutHeader, FormulaInput, HModal,
    Modal
  },
  data() {
    return {
      visible: false,
      formula: undefined
    };
  },
  methods: {
    handleOK() {
      this.service.post('/flow/formula/translate', {formula: this.formula}).then(data => {
        this.$emit('ok', {
          title: data.formulaText,
          value: data.formula
        });
        this.close();
      });
    },
    open() {
      this.visible = true;
      this.formula = this.value;
    },
    addAction(action) {
      this.$refs.formulaInput.addAction(action);
    },
    selectVariabe(variable) {
      this.selectedVariable = variable;
      this.$refs.formulaInput.addVariabe(variable);
    },
    close() {
      this.visible = false;
    },
  }
};
</script>